<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" >
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<style>.mm1{
border:solid 2px #000000;
background:linear-gradient(to bottom,#5b5b5b,#3c3c3c);

}
.btns { width:143px; height:40px; background: no-repeat left top; color:#FFF; } 

</style>

</head>
<body>
<div style=""  align="center" >
<%@ include file="top.jsp" %>
</div>
<div class="mm1">

<div class="nav2">

 <ul>
            <li><a href="#">轿车</a>
                <ul>
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="小型车">
                    </form>
                    </li>
                    
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="紧凑型车">
                    </form>
                    </li>
                    <li>
					<form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="中大型车">
                    </form>
					</li>
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="大型车">
                    </form>
                    </li>
                </ul>
            </li>
            <li><a href="#">SUV</a>
                <ul>
                <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="小型SUV">
                    </form>
                    </li>
                    
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="紧凑型SUV">
                    </form>
                    </li>
                    <li>
					<form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="中大型SUV">
                    </form>
					</li>
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="大型车SUV">
                    </form>
                    </li></ul>
            </li>
            <li><a href="#">商用车</a>
                <ul>
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="皮卡">
                    </form>
                    </li>
                    
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="微型面包车">
                    </form>
                    </li>
                    <li>
					<form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="轻型客车">
                    </form>
					</li>

                </ul>
            </li>
            <li><a href="#">其他</a>
                <ul>
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="跑车">
                    </form>
                    </li>
                    
                    <li>
                    <form action="${pageContext.request.contextPath}/car/querycars.action"  method="post">
                    <input class="btns"type="submit"name="car05"value="MPV">
                    </form>
                    </li>

                </ul> 
            </li>
        </ul>
</div>




<div class="htmleaf-container">

	
	<div class="carousel" data-gap="20" data-bfc>
		
			
		<figure>
			<img src="img/1.jpg" alt="">
			<img src="img/2.jpg" alt="">
			<img src="img/3.jpg" alt="">
			<img src="img/4.jpg" alt="">
			<img src="img/5.jpg" alt="">
			<img src="img/6.jpg" alt="">
			<img src="img/7.jpg" alt="">
			<img src="img/8.jpg" alt="">
		</figure>
		<nav>
		<button class="nav prev">&lt;</button>
		<button class="nav next">&gt;</button>
		</nav>
			
	</div>
	
</div>
</div>

<div class="news">
	<a href="news.jsp"><h2>新闻资讯</h2></a>
	<ol>
		<li>i埃及的杀手</li>
		<li>大啊</li>
		<li>大撒大撒</li>
		<li>发达的</li>
	</ol>	
</div>

<div class="forum">
	<a href="forum.jsp"><h2>论坛谍报</h2></a>
	<ol>
		<a href="${pageContext.request.contextPath}/forum/showResponse.action"><li>i埃及的杀手</li></a>
		<li>大啊</li>
		<li>大撒大撒</li>
		<li>发达的</li>
		
		
	</ol>	
</div>

<script type="text/javascript">
	'use strict';
   
	window.addEventListener('load', function () {
		var carousels = document.querySelectorAll('.carousel');

		for (var i = 0; i < carousels.length; i++) {
			carousel(carousels[i]);
		}
	});

	function carousel(root) {
		var figure = root.querySelector('figure'),
			nav = root.querySelector('nav'),
			images = figure.children,
			n = images.length,
			gap = root.dataset.gap || 0,
			bfc = 'bfc' in root.dataset,
			theta = 2 * Math.PI / n,
			currImage = 0;

		setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
		window.addEventListener('resize', function () {
			setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
		});

		setupNavigation();

		function setupCarousel(n, s) {
			var apothem = s / (2 * Math.tan(Math.PI / n));

			figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

			for (var i = 0; i < n; i++) {
				images[i].style.padding = gap + 'px';
			}for (i = 1; i < n; i++) {
				images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
				images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
			}
			if (bfc) for (i = 0; i < n; i++) {
				images[i].style.backfaceVisibility = 'hidden';
			}rotateCarousel(currImage);
		}

		function setupNavigation() {
			nav.addEventListener('click', onClick, true);

			function onClick(e) {
				e.stopPropagation();

				var t = e.target;
				if (t.tagName.toUpperCase() != 'BUTTON') return;

				if (t.classList.contains('next')) {
					currImage++;
				} else {
					currImage--;
				}

				rotateCarousel(currImage);
			}
		}

		function rotateCarousel(imageIndex) {
			figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
		}
	}
</script>


</body>


</html>
